<script lang="ts">
    import { onDestroy, onMount } from "svelte";
    import type { TableStore } from "./Table";
    import { useStyle } from "../utils/useStyle";
    import Colgroup from "./Colgroup.svelte";
    import Cell from "./Cell.svelte";

    type HeadProps = {
        data: TableStore;
        sticky?: boolean;
        onInitColumnWidth: (idx: number, width: number) => void;
        onResizeHeader: (width: number, height: number) => void;
        virtual?: boolean;
    };

    const props: HeadProps = $props();
    let thead: any;
    let headerWrap: any;

    const onHeadEntry = (entry: ResizeObserverEntry) => {
        const el = entry.target;
        if (el.tagName === "THEAD") {
            const rect = el.getBoundingClientRect();
            props.onResizeHeader(rect.width, rect.height);
            headerWrap.style.height = rect.height + "px";
        } else {
            // setTimeout, header变化让body设置height后再计算是否有垂直滚动条
            setTimeout(() => {
                const rect = el.getBoundingClientRect();
                const parentRect = el.closest(".cm-table-body")!.getBoundingClientRect();

                if (rect.height > parentRect.height) {
                    headerWrap.style.overflowY = "scroll";
                } else {
                    headerWrap.style.overflowY = "";
                }
            });
        }
    };

    onMount(() => {
        const ro2 = new ResizeObserver((entries) => {
            entries.forEach((entry) => onHeadEntry(entry));
        });
        ro2.observe(thead);
        const parent = thead.closest(".cm-table");
        const body = parent.querySelector(".cm-table-body-wrap");
        ro2.observe(body);
        onDestroy(() => {
            ro2.unobserve(thead);
            ro2.unobserve(body);
        });
    });

    const headStyle: any = $derived(
        useStyle(
            {},
            {
                position: props.sticky ? "sticky" : "",
                // position: 'absolute',
                top: 0,
                "z-index": 2,
                "min-width": "100%",
                "overflow-x": "hidden",
            },
        ),
    );

    $effect(() => {
        if (headerWrap) {
            headerWrap.scrollLeft = props.data.headerLeft;
        }
    });
</script>

<div class="cm-table-header" style={headStyle} bind:this={headerWrap}>
    <table>
        <Colgroup data={props.data} />
        <thead bind:this={thead}>
            {#each props.data.columnsRows as row, rowIndex (rowIndex)}
                <tr>
                    {#each row as col, index (col.name || col.type)}
                        <Cell
                            colSpan={col._colspan}
                            rowSpan={col._rowspan}
                            column={col}
                            type="th"
                            showFixedLeft={props.data.showFixedLeft}
                            colIndex={index}
                            showFixedRight={props.data.showFixedRight}
                            checkedAll={props.data.checkedAll}
                        />
                    {/each}
                </tr>
            {/each}
        </thead>
    </table>
</div>
